{extend name="public/base" /}
{block name="css"}
{load href="https://cdn.staticfile.org/Swiper/4.5.0/css/swiper.min.css" /}
<style>
  .home-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide > a > img {
    width: 100%;
  }

  .swiper-slide > img {
    width: 100%;
  }

  .swiper-container .swiper-pagination{
    margin-bottom: 10px;
    text-align: center;
  }

  .swiper-container .swiper-pagination .swiper-pagination-bullet {
    background: rgba(200,200,200,.6);
    opacity: 1.0;
    border-radius: 5px;
    width: 70px;
    height: 3px;
  }
  .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
    background: #FFFFFF;
  }
  .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0px 10px;
  }

  .order-title {
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
    margin-top: -2px;
    margin-bottom: 0;
  }

  .order-input {
    border: none;
    width: 160px;
    height: 32px;
    padding-left: 10px;
    margin-top: 13px;
    margin-left: 8px;
  }

  .order-input:nth-child(1) {
    margin-left: 0;
  }

  .order-submit {
    width: 100px;
    background: #B5A055;
    height: 32px;
    color: #ffffff;
    border: none;
    padding: 0 18px;
    margin-left: 8px;
  }

  .product > .col-4 {
    margin-top: 30px;
  }

  .product > .col-4 > img {
    cursor: pointer;
    width: 270px;
  }

  .swiper-container1 {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .swiper-pagination1 {
    position: absolute;
    z-index: 100;
    left: 35% !important;
    top: 93%;
  }

  .swiper-container1 .swiper-pagination1 .swiper-pagination-bullet {
    background: rgba(200,200,200,.6);
    opacity: 1.0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .swiper-container1 .swiper-pagination1 .swiper-pagination-bullet-active {
    background: #FFFFFF;
  }
  .swiper-container1 .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0px 5px;
  }

  .product-item {
    position: relative;
  }

  .product-item-subtitle {
    text-transform: uppercase; color: #999999; font-size: 12px;
  }

  .product-item-desc {
    width: 285px; padding: 10px 0; margin-top: 10px; background:#93412C; font-size: 15px; color: #FFFFFF; text-align: center;
  }

  .product-item:hover {
    text-decoration: none !important;
  }

  .swiper-container2 {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .swiper-pagination2 {
    position: absolute;
    z-index: 100;
    margin-left: 60%;
    bottom: 0 !important;
  }

  .swiper-container2 .swiper-pagination2 .swiper-pagination-bullet {
    background: rgba(200,200,200,.6);
    opacity: 1.0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .swiper-container2 .swiper-pagination2 .swiper-pagination-bullet-active {
    background: #FFFFFF;
  }
  .swiper-container2 .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
  }

  .swiper-container3 {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .swiper-pagination3 {
    position: absolute;
    z-index: 100;
    margin-left: 10px;
    bottom: 10px !important;
  }

  .swiper-container3 .swiper-button-prev::after {
    content: '';
  }
  .swiper-container3 .swiper-button-next::after {
    content: '';
  }
  .swiper-container3 .swiper-button-prev{
    background-image: url('https://res.bestyoujia.com/web/DGZJ/toilet/pc/left.png') ;
    left: 50px;
    right: auto;
    width: 61px;
    height: 108px;
    background-size: cover;
  }
  .swiper-container3 .swiper-button-next{
    background: url('https://res.bestyoujia.com/web/DGZJ/toilet/pc/right.png');
    right: 50px;
    width: 61px;
    height: 108px;
    left: auto;
    background-size:cover;
  }

  .swiper-container3 .swiper-pagination3 .swiper-pagination-bullet {
    background: rgba(200,200,200,.6);
    opacity: 1.0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .swiper-container3 .swiper-pagination3 .swiper-pagination-bullet-active {
    background: #FFFFFF;
  }
  .swiper-container3 .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
  }
</style>
{/block}
{block name="main"}
<div id="pop-act" style="display: none;width: 100%;height: 100%;background: rgba(0,0,0,.5); position: fixed;left: 0;top: 0;overflow: hidden;z-index: 9">
  <div style="margin: 0 auto;position: relative;margin-top: 15%">
    <img alt="" style="margin-top: 10px" class="mx-auto img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202010/pop_up.png">
    <img id="pop-close" alt="" style="cursor: pointer; position: absolute; top: 0; right: 0;margin-top: 10px" class="mx-auto img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act5thanniversary/close.png">
    <div style="text-align: center;margin-top: 20px">
      <a href="{$Request.root}/activities/act202010.html?utm_source=官网首页全屏弹窗" style="margin-right: 20px;background: #AA3023; border-radius: 20px; color: #ffffff; border: 0; padding: 8px 20px">活动详情 ></a>
      <a onclick="doConsult()" href="javascript:void(0)" style="margin-left: 20px;background: #AA3023; border-radius: 20px; color: #ffffff; border: 0; padding: 8px 20px">抽大奖 ></a>
    </div>
  </div>
</div>
<section class="container-fluid main-container">
  <!-- banner -->
  <div class="row" style="position: relative;display: flex;align-content: center;align-items: center;z-index: 10">
    <div class="swiper-container" style="position: relative;z-index: 10">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="{$Request.root}/activities/act202201.html"><img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202201/pc/mj_pc_01.jpg"></a>
        </div>
        <div class="swiper-slide">
          <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/banner2.png">
        </div>
        <div class="swiper-slide">
          <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/banner3.png">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div style="position: absolute;left: 0;bottom: 64px;z-index: 100;width: 100%">
      <div class="mx-auto" style="width: 652px;height: 104px;padding: 15px;background: rgba(0,0,0,.65)">
        <p class="order-title">免费获取  整体软装报价</p>
        <div>
          <input class="order-input" id="home-username" placeholder="您的称呼" />
          <input class="order-input" id="home-mobile" placeholder="您的联系方式" />
          <input class="order-input" id="home-building" placeholder="填写小区楼盘" />
          <button class="order-submit">立即预约</button>
        </div>
      </div>
    </div>
  </div>
  <!-- banner end -->

  <div class="m-t-5 d-flex flex-column justify-content-center mx-auto" style="padding-bottom: 50px; align-items: center">
    <img alt="全屋整体软装产品体系 4大品类超全配置省心省力更省时" class="mx-auto" style="" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/title1.png">
    <div class="m-t-5 d-flex" style="width: 1200px; justify-content: space-between">
      <a href="{$Request.root}/customization.html" class="d-flex flex-column justify-content-center product-item" style="width: 285px; height: 220px; border: 1px solid #CCCCCC; align-items: center">
        <img alt="" class="mx-auto" style="" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/dz.png">
        <div style="color: #333333; font-size: 24px; font-weight: 500; margin-top: 20px">全屋定制</div>
        <div class="product-item-subtitle">customization</div>
        <div class="product-item-desc">
          定制衣柜、定制家具<br/>
          榻榻米、洗衣柜
        </div>
        <img alt="" class="mx-auto" style="position: absolute; bottom: -14px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/enter.png">
      </a>
      <a href="{$Request.root}/furniture.html" class="d-flex flex-column justify-content-center product-item" style="width: 285px; height: 220px; border: 1px solid #CCCCCC; align-items: center">
        <img alt="" class="mx-auto" style="" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/jj.png">
        <div style="color: #333333; font-size: 24px; font-weight: 500; margin-top: 20px">成品家具</div>
        <div class="product-item-subtitle">furniture</div>
        <div class="product-item-desc">
          全屋成品家具<br/>
          沙发、餐桌椅、床等
        </div>
        <img alt="" class="mx-auto" style="position: absolute; bottom: -14px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/enter.png">
      </a>
      <a href="{$Request.root}/curtain.html" class="d-flex flex-column justify-content-center product-item" style="width: 285px; height: 220px; border: 1px solid #CCCCCC; align-items: center">
        <img alt="" class="mx-auto" style="" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/clrs.png">
        <div style="color: #333333; font-size: 24px; font-weight: 500; margin-top: 20px">窗帘软饰</div>
        <div class="product-item-subtitle">curtain</div>
        <div class="product-item-desc">
          窗帘、卷帘、布艺、地毯<br/>
          墙纸挂画、饰品摆件、床垫、灯具
        </div>
        <img alt="" class="mx-auto" style="position: absolute; bottom: -14px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/enter.png">
      </a>
      <a href="{$Request.root}/reform.html" class="d-flex flex-column justify-content-center product-item" style="width: 285px; height: 220px; border: 1px solid #CCCCCC; align-items: center">
        <img alt="" class="mx-auto" style="" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/jzgz.png">
        <div style="color: #333333; font-size: 24px; font-weight: 500; margin-top: 20px">精装改造</div>
        <div class="product-item-subtitle">retrofit</div>
        <div class="product-item-desc">
          乳胶漆改色、主材更换、电路改造<br/>
          艺术涂料、造型墙、软硬包、全屋美缝
        </div>
        <img alt="" class="mx-auto" style="position: absolute; bottom: -14px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/enter.png">
      </a>
    </div>
  </div>

  <div style="position: relative; margin-top: 30px; padding: 80px 0; display: flex; flex-direction: column; align-content: center;align-items: center; background: url('https://res.bestyoujia.com/web/ZMYJ/index/pc/zp_bg.png'); background-size: cover">
    <img alt="1:1可还原的全屋整体软装效果" class="mx-auto" style="" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/title2.png">
    <!-- Swiper -->
    <div class="swiper-container2" style="position:relative; margin-top: 80px; width: 1200px; overflow: hidden">
      <div class="swiper-wrapper" style="width: 1200px">
        <div class="swiper-slide" style="width: 1200px">
          <img alt="" class="img-fluid" style="width: 1200px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/zp1.png">
        </div>
        <div class="swiper-slide" style="width: 1200px">
          <img alt="" class="img-fluid" style="width: 1200px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/zp2.png">
        </div>
        <div class="swiper-slide" style="width: 1200px">
          <img alt="" class="img-fluid" style="width: 1200px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/zp3.png">
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination2"></div>
      <img alt="" class="img-fluid appointment-plan" style="position: absolute; z-index: 100000; right: 0; bottom: 0; cursor: pointer" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/yy_icon.png">
    </div>
  </div>

  <div style="position: relative; padding: 80px 0; display: flex; flex-direction: column; align-content: center;align-items: center;">
    <img alt="精装房软装案例" class="mx-auto" style="" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/title3.png">
    <!-- Swiper -->
    <div class="swiper-container3" style="position:relative; margin-top: 80px; width: 1200px; overflow: hidden">
      <div class="swiper-wrapper" style="width: 1200px">
        <div class="swiper-slide" style="width: 1200px">
          <a href="{$Request.root}/case/169.html"><img alt="" class="img-fluid" style="width: 1200px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/eg1.png"></a>
        </div>
        <div class="swiper-slide" style="width: 1200px">
          <a href="{$Request.root}/case/125.html"><img alt="" class="img-fluid" style="width: 1200px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/eg2.png"></a>
        </div>
        <div class="swiper-slide" style="width: 1200px">
          <a href="{$Request.root}/case/126.html"><img alt="" class="img-fluid" style="width: 1200px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/eg3.png"></a>
        </div>
        <div class="swiper-slide" style="width: 1200px">
          <a href="{$Request.root}/case/170.html"><img alt="" class="img-fluid" style="width: 1200px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/eg4.png"></a>
        </div>
        <div class="swiper-slide" style="width: 1200px">
          <a href="{$Request.root}/case/171.html"><img alt="" class="img-fluid" style="width: 1200px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/eg5.png"></a>
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <!-- Add Pagination -->
      <div class="swiper-pagination3"></div>
    </div>
  </div>

  <div class="d-flex" style="position: relative">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/fwtx_bg.png">
    <div style="background: #F5F5F5; margin-top: 100px; width: 100%; padding: 80px 0 80px 80px">
      <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/title5.png">
      <div style="margin-top: 70px">
        <div><b>· 行业首推“全能型规划师”：</b>从规划、软装、柜体、深化实现完美还原落地</div>
        <div style="margin-top: 15px"><b>· N+1精装立体设计系统：</b>一个团队服务一个家庭，让精装房装修更省心</div>
        <div style="margin-top: 15px"><b>· 管家式托管服务：</b>全案设计服务、精装改造+施工、全球F2C直采价格直省30%、配送+安装+摆场+交付全流程把控
        </div>
        <div style="margin-top: 15px"><b>·全品类无忧售后：</b>24小时响应、品质质保、客服回访 、统一售后服务</div>
      </div>
      <div style="margin-top: 60px">
      <a href="{$Request.root}/esthetics.html" style="width: 160px;
height: 50px;
background:#93412C;padding: 15px 40px; color: #FFFFFF">探索更多 ></a>
      </div>
    </div>
  </div>

  <div class="d-flex flex-column home-container" style="position: relative; margin-top: 20px">
    <img alt="" class="img-fluid" style="margin-top: 60px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/f2c.png">
    <button onclick="window.location.href='./esthetics.html'" style="opacity: 0;position: absolute;bottom: 0%;
    left: 42%;
    width: 210px;
    height: 70px;">探索更多</button>
  </div>

  <div class="d-flex flex-column home-container" style="position: relative">
    <img alt="因为专注  所以专业" class="mx-auto" style="margin-top: 60px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/title7.png">
    <img class="img-fluid" style="margin-top: 60px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/home/pc/zy1.png">
    <img class="img-fluid" style="margin-top: 30px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/home/pc/zy2.png">
  </div>

  <div class="d-flex flex-column" style="position: relative;background: #93412C;margin-top: 80px">
    <img alt="关于我们" class="mx-auto" style="margin-top: 60px" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/title8.png">
    <div style="display: flex; width: 1200px; margin-top: 50px" class="mx-auto">
      <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/about_us.png">
      <div style="margin-left: 60px">
        <img alt="" style="" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/logo_us.png">
        <div style="display: flex; flex-direction: column; align-items: center; color: #fff; line-height: 40px; margin-top: 50px">
          成都致美筑家家居装饰有限公司，简称致美优家，秉承着兄弟品牌U家工场为极致服务体验而生的理念，率先提出精装房美学整配的概念，致力于解决当下精装房业主家居消费服务体验过程中的诸多痛点。<br/>
          成立专注于服务精装房全屋家居团队，囊括顾问、规划师、定制设计师、交付管家等；同时期1600㎡的美学体验馆对外开放，经过两年时间发展，已成为成都精装房市场的领导品牌。2020.12.12全新1100㎡家居生活体验馆在富森美家居1号软装馆7楼盛大开业。
          目前，致美优家已服务5000+成都精装房业主，提供全屋家居整体软装，实现从设计、精装改造，到定制柜体、成品家具、窗帘、灯具、软饰摆场，交付入住的一站式省心服务。
        </div>
      </div>
    </div>
    <div class="mx-auto" style="margin: 50px 0 60px"><img onclick="window.location.href='{$Request.root}/esthetics.html'" alt="" style="cursor: pointer" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/us_icon.png"></div>
  </div>

  <div class="d-flex flex-column" style="position: relative;">
    <img alt="" style="width: 100%;" src="https://res.bestyoujia.com/web/ZMYJ/index/pc/zt.png">
    <button onclick="window.location.href='{$Request.root}/vr.html'" style="opacity: 0;position: absolute;bottom: 43%;left: 43%;width: 260px;height: 60px;">
      逛展厅
    </button>
  </div>

</section>
{/block}
{block name="js"}
{load href="https://cdn.staticfile.org/Swiper/4.5.0/js/swiper.min.js" /}
<script>
    $('.navbar-nav').children('li').eq(0).addClass('nav-active');

    $('#pop-close').on('click', function () {
        $('#pop-act').hide();
    });

    $('.product-item-desc').hide();

    $('.product-item').hover(function(){
      $(this).find('.product-item-desc').show();
      $(this).find('.product-item-subtitle').hide();
    },function(){
      $(this).find('.product-item-desc').hide();
      $(this).find('.product-item-subtitle').show();
    });

    // 轮播事件
    const swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        } ,
        autoplay: {
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        paginationElement : 'li',
        paginationClickable: true,
        loop: true,
        autoplayDisableOnInteraction: false
    });

    const swiper1 = new Swiper('.swiper-container1', {
        pagination: {
            el: '.swiper-pagination1',
            clickable: true
        },
        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
    });

    const swiper2 = new Swiper('.swiper-container2', {
      pagination: {
        el: '.swiper-pagination2',
        clickable: true
      },
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },
    });

    const swiper3 = new Swiper('.swiper-container3', {
      pagination: {
        el: '.swiper-pagination3',
        clickable: true
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

    $('.order-submit').on('click', function () {
        window.page_position = '首页-轮播版块-立即预约';

        const building = $('#home-building').val();
        const username = $('#home-username').val() || '';
        const mobile = $('#home-mobile').val();

        const mobileStatus = validMobile(mobile);

        switch (mobileStatus) {
            case 1:
                layer.msg('预约中，请稍候...', {
                    icon: 16
                    ,shade: 0.01
                });

                const data = {
                    mobile,
                    customer: username,
                    building,
                };

                doAppointment(
                    data,
                    function(res) {
                        console.log('onAppointmentSuccess', res);
                        const { data = '' } = res;
                        if (data) {
                            buryingPoint('APPOINTMENT', data);
                            layer.closeAll();
                            showToast('预约成功', 'success');
                            $('#home-building').val('');
                            $('#home-username').val('');
                            $('#home-mobile').val('');
                        }
                    },
                    function(err) {
                        console.log('onAppointmentError', err);
                        layer.closeAll();
                        showToast('抱歉，预约失败～', 'fail');
                        $('#home-building').val('');
                        $('#home-username').val('');
                        $('#home-mobile').val('');
                    }
                );
                break;
            case 2:
                showToast('手机号码格式不正确', 'fail');
                break;
            case 3:
                showToast('联系方式不能为空', 'fail');
                break;
        }
    });

</script>
{/block}